<script setup lang="ts">
import CloseOutlined from '@iconify-icons/ant-design/close-outlined';
defineOptions({
  name: 'ReDrawer'
});

const $props = defineProps({
  title: {
    type: String,
    default: '抽屉标题'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确认'
  }
});

const $emits = defineEmits<{
  (e: 'update:visible', visible: boolean): void;
  (e: 'onCancel'): void;
  (e: 'onClose', done: () => void): void;
  (e: 'onConfirm'): void;
}>();

const visible = defineModel('visible', { default: false });

const onCancel = () => {
  $emits('onCancel');
};
const onConfirm = () => {
  $emits('onConfirm');
};
const onClose = (done: () => void) => {
  $emits('onClose', done);
};
</script>

<template>
  <el-drawer
    v-model="visible"
    class="re-drawer"
    v-bind="$attrs"
    :show-close="false"
    :before-close="onClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">{{ $props.title }}</h4>
      <el-button text bg size="small" @click="close">
        <IconifyIconOffline :icon="CloseOutlined" />
      </el-button>
    </template>
    <template #default>
      <div class="overflow-x-hidden overflow-y-auto h-[calc(100vh-100px)]">
        <slot />
      </div>
    </template>
    <template #footer>
      <div
        class="flex items-center justify-end border-t border-solid border-color h-[50px] box-border px-md"
      >
        <el-button @click="onCancel">{{ $props.cancelText }}</el-button>
        <el-button type="primary" @click="onConfirm">
          {{ $props.confirmText }}
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss">
.re-drawer .el-drawer__header {
  box-sizing: border-box;
  align-items: center;
  height: 50px;
  padding: 0 12px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--el-border-color);
}

.re-drawer .el-drawer__body {
  padding: 0;
}

.re-drawer .el-drawer__footer {
  padding: 0;
}
</style>
